<template>
  <div class="course-section">
      <h2 class="section" v-text="sectionData.sectionName"></h2>
      <!-- 课时列表 -->
      <p class="lesson" v-for="item in sectionData.courseLessons" :key="item.id" @click="handleClick(item)">
        <span v-text="item.theme"></span>
        <van-icon v-if="item.canPlay" name="play-circle" size="20px"></van-icon>
        <van-icon v-else name="lock" size="20px"></van-icon>
      </p>
  </div>
</template>

<script>
export default {
  name: 'course-section',
  props: {
    sectionData: {
      type: Object,
      require: true
    }
  },
  methods: {
    handleClick (lessonInfo) {
      console.log(lessonInfo)
      if (lessonInfo.canPlay) {
        this.$router.push({
          name: 'LessonVideo',
          params: {
            lessonId: lessonInfo.id
          }
        })
      }
    }
  },
  created () {}
}
</script>

<style scoped>
.course-section{
  padding: 0 20px;
}
.lesson{
  display: flex;
  justify-content: space-between;
  line-height: 20px;
}
</style>
